<template>
	<div class="siteaside-container">
		<template v-if="datas"
			><HeadImg :size="150" :url="datas.avatar" />
			<h1 class="title">{{ datas.siteTitle }}</h1></template
		>

		<Menu />
		<Contact v-if="datas" />
		<p class="backup" v-if="datas">{{ datas.icp }}</p>
	</div>
</template>

<script>
import HeadImg from "@/components/HeadImg";
import Contact from "./Contact";
import Menu from "./Menu";
import { mapState } from "vuex";
export default {
	components: {
		HeadImg,
		Contact,
		Menu,
	},
	computed: {
		...mapState("setting", ["datas"]),
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.siteaside-container {
	padding: 20px 0;
	width: 100%;
	height: 100%;
	background: @dark;
	overflow-x: hidden;
	overflow-y: auto;
}
.headimg-container {
	margin: 0 auto;
}
.title {
	font-size: 20px;
	color: white;
	text-align: center;
}
.backup {
	font-size: 12px;
	text-align: center;
}
</style>
